import { EnhancedTableProps, FormRule, Space } from 'tdesign-vue-next';

import { ActionBarItem } from '@/components/common-action-bar/index.vue';
import { t } from '@/locales';
import { tableActionBtn, tableSwitch } from '@/utils/action';

export interface FormItem {
  id?: number;
  parent: number;
  type: number;
  name: string;
  icon?: string;
  componentName: string;
  componentPath: string;
  componentRoute: string;
  mark: string;
  langs: Recordable;
}

export const ACTION_BAR_DATA: ActionBarItem[] = [
  { text: 'common.add', theme: 'primary', auth: ['system:menu:create'], key: 'addShow' },
];

export const COLUMNS: EnhancedTableProps['columns'] = [
  { title: 'ID', colKey: 'id', width: 100 },
  { title: () => t('pages.menu.name'), colKey: 'name' },
  { title: () => t('common.sort'), colKey: 'listorder', width: 120 },
  { title: () => t('pages.menu.mark'), colKey: 'mark', width: 240, ellipsis: true },
  { title: () => t('pages.menu.router'), colKey: 'componentRoute' },
  { title: () => t('pages.menu.componentPath'), colKey: 'componentPath', width: 220 },
  { title: () => t('common.createAt'), colKey: 'updatedAt' },
  {
    title: () => t('common.display'),
    colKey: 'display',
    width: 150,
    cell(h, { row }) {
      const ele = tableSwitch(h, row, ['content:patch:display']);
      return row.display !== undefined ? ele : '';
    },
  },
  {
    colKey: 'action',
    title: () => t('common.operation'),
    width: 150,
    cell(h, { row }) {
      const actionAdd = tableActionBtn({ h, type: 'add', row, auths: ['system:menu:create'] });
      const actionEdit = tableActionBtn({ h, type: 'edit', row, auths: ['system:menu:detail'] });
      const actionDelete = tableActionBtn({ h, type: 'delete', row, auths: ['system:menu:delete'] });

      return h(Space, () => {
        return [row.type === 2 ? '' : actionAdd, actionEdit, actionDelete];
      });
    },
  },
];

export const FORM_DATA: FormItem = {
  id: 0,
  parent: 0,
  type: 0,
  name: '',
  icon: '',
  componentName: '',
  componentPath: '',
  componentRoute: '',
  mark: '',
  langs: {
    en_US: '',
  },
};

export const FORM_RULES: Record<string, FormRule[]> = {
  name: [{ required: true }, { min: 1, max: 30, message: t('common.lengthBetween', { min: 1, max: 30 }) }],
  mark: [{ required: true }],
  componentRoute: [{ required: true }],
  componentPath: [{ required: true }],
};
